<template>
  <div
    class="active_card"
    :style="{ border: selected ? '2px #267DF0 solid' : '2px #ffffff solid' }"
  >
    <div class="mask"></div>
    <div class="func_name">{{ data.name }}</div>
    <div class="active_card_left">
      <div class="active_card_tip">
        <img :src="invoke_num" />
        <div class="active_card_tip_txt">已调用次数</div>
        <div class="active_card_cont">{{ data.invoke_count }}</div>
      </div>
      <div class="active_card_tip">
        <img :src="status" />
        <div class="active_card_tip_txt">函数状态</div>
        <div class="active_card_cont">
          {{ data.status == 1 ? "Ready" : "Not Ready" }}
        </div>
      </div>
      <div class="active_card_tip">
        <img :src="run_time" />
        <div class="active_card_tip_txt">已运行时间</div>
        <div class="active_card_cont">{{ getGap }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { dateDiff } from "../../util/format";
export default {
  name: "func_card",
  methods: {},
  data: function () {
    return {
      invoke_num: require("../../assets/invoke_nums.svg"),
      run_time: require("../../assets/run_time.svg"),
      status: require("../../assets/status.svg"),
    };
  },
  props: {
    data: Object,
    selected: Boolean,
  },
  components: {},
  computed: {
    getGap: function () {
      return dateDiff(this.data.run_time);
    },
  },
};
</script>

<style scoped>
.func_name {
  font-size: 30px;
  font-weight: bold;
  z-index: 10;
  position: relative;
}
.copy:hover {
  opacity: 0.5;
}
.copy {
  transition: 0.3s;
  font-size: 12px;
  cursor: pointer;
  color: rgb(148, 148, 148);
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  margin-left: 10px;
}
.active_card {
  transition: 0.2s;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  background: white;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 15px;
  padding-bottom: 20px;
  margin-right: 12.5px;
}
.active_card_left {
  position: relative;
  z-index: 10;
  /* width: 250px; */
}
.active_card_tip {
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.active_card_tip img {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.active_card_tip_txt {
  font-size: 14px;
}
.active_card_cont {
  font-size: 14px;
  font-weight: bold;
  color: #3e7cf4;
  margin-left: 5px;
}
.total {
  font-size: 30px;
}
</style>